<!DOCTYPE html>
<html>
<head>
	<title> 模仿腾讯微博 </title>
	<meta charset='utf-8'>
	<style>
	body {
		margin:0;
		padding: 0;
		background-color: #3C3A3B;
	}

	.hide-text {
		white-space: nowrap;
		overflow: hidden;
		text-indent: 1000px;
	}

	#content {
		background-color: #fff;
		width: 500px;
		margin: 10px auto;
		border-radius: 5px;
	}

	.weibo-box-title {
		font:18px/27px 'Microsoft Yahei';
	}

	.weibo-box {
		padding:15px 20px;
	}
	
	.input_detail {
		width: 165px;
	}

	.conBox {
		width: 455px;
		height: 72px;
		resize:none;
	}

	.weibo-send {
		text-align: right;
		font:12px/30px '宋体';
		color:#999;
	}

	#count {
		font:26px/30px 'Georgia';
	}

	.report-button {
		display: inline-block;
		width: 112px;
		height: 30px;
		background: url(http://js.fgm.cc/learn/lesson6/img/btn.png) no-repeat top left;
	}

		.report-button:hover {
			background-position: 0px -30px;
		}


	.comment-box {
		padding: 10px;
	}
	
	.comment-box-h2 {
		background-color:#E3EAEC;
		margin-bottom: 0px;
	}
	.comment-box-title {
		padding: 5px 15px;
		background-color: #fff;
		font:normal 14px/24px '宋体';
		margin-left: 15px;
	}

	.comment-detail {
		zoom:1;
		overflow: hidden;
		border-bottom: 1px dashed #999;
		padding:10px 0px;
	}

	.comment-detail:hover {
		background-color: #F5F5F5;
	}

	.user-avatar {
		border-radius: 4px;
		height: 50px;
		border: 1px solid #999;
		margin-left: 5px;
		float: left;
	}

	.user-content {
		font-size: 14px;
		margin:5px auto 10px 65px;
		overflow: hidden;
	}

	.user-link {
		color:#2B4A78;
		text-decoration: none;
	}

		.user-link:hover {
			text-decoration: underline;
		}

	.user-time {
		color:#889D86;
		font-size: 13px;
		margin-left: 65px;
	}

	</style>
</head>

<body>
<div id="main">
	<div id="content">
		<div class="weibo-box">
			<h2 class='weibo-box-title'>来 , 说说你在做什么 , 想什么</h2>
			<div class="weibo-avatar">
				<input type="text" class='input_detail' id='nickname' placeholder='昵称' value='SAWSAWSAW'> 
			</div>
			<textarea class="conBox" placeholder='输入你的微博' id='weibo' maxlength='140'></textarea>
			<div class="weibo-send">
				还能输入<span id='count'>140</span>个字
				<a href="##" class='report-button hide-text' id='report'>广播</a>
			</div>
		</div>

		<div class="comment-box" id='comment-box'>
			<h2 class='comment-box-h2'><span class='comment-box-title'>大家在说</span></h2>
			<div class="comment-detail">
				<div class="user-avatar">
					<img src="http://js.fgm.cc/learn/lesson6/img/face.gif" alt="" class='user-avatar-pic'>
				</div>
				<div class="user-content">
					<span class="user-name"><a href="##" class='user-link'>我跟你</a></span>:
					<span class="user-comment">讲啊</span>
				</div>
				<div class="user-time">
					<span>09月09日 11:37</span>
				</div>

			</div>
		</div>
	</div>
</div>
</body>
<script>
	window.onload=function() {
		document.getElementById('report').onclick=getUserInfo;
		document.getElementById('weibo').onkeydown=countWords;
		document.getElementById('weibo').onkeyup=countWords;
	}

	function getUserInfo() {
		var nickname = document.getElementById('nickname').value;
		var weibo = document.getElementById('weibo').value;

		if(nickname == '' || weibo== '') {
			alert('请输入昵称和微博内容');
			return false;
		}

		var time = getNowTime();

		var newDiv = document.createElement('div');
		newDiv.innerHTML="<div class='user-avatar'><img src='http://js.fgm.cc/learn/lesson6/img/face.gif' class='user-avatar-pic' /></div><div class='user-content'><span class='user-name'><a href='##' class='user-link'>"+nickname+"</a></span>: <span class='user-comment'>"+weibo+"</span></div><div class='user-time'><span>"+time[0]+"月"+time[1]+"日 "+time[2]+":"+time[3]+"</span></div>";
		newDiv.className='comment-detail';
		var commentBox = document.getElementById('comment-box');
		var oldDiv = commentBox.getElementsByTagName('div')[0];
		commentBox.insertBefore(newDiv,oldDiv);
	}

	function countWords() {
		var number = document.getElementById('weibo').value.length;
		var maxNumber = 140 - number;
		document.getElementById('count').innerHTML=maxNumber;
	}

	function getNowTime() {
		var myDate = new Date();
		var month = myDate.getMonth()+1;
		var day = myDate.getDate();
		var hour = myDate.getHours();
		var minutes = myDate.getMinutes();
		var myTime = [month,day,hour,minutes];
		// 格式化时间
		for(var i in myTime) {
			myTime[i] = formatTime(myTime[i]);
		}
		return myTime;
	}

	function formatTime(time) {
			return time.toString().replace(/^(\d)$/,'0$1');
		}






	

</script>
</html>